import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
 * @Author: 小胖沱 1643200914@qq.com
 * @Date: 2022-12-19 17:52:54
 * @LastEditors: 小胖沱 1643200914@qq.com
 * @LastEditTime: 2023-01-04 17:43:48
 * @FilePath: \jk_sort_front\src\pages\QueryReport\ProductionBroad\components\Attendance.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Pie } from '@antv/g2plot';
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import styles from './reservoirInventory.module.less';
import { getRemFontSize } from './stockNumber';
export default (props) => {
    const { data } = props;
    const containerRef = useRef();
    const [chart, setChart] = useState();
    const [cHeight, setCHeight] = useState(0);
    const [fontSize, setFontSize] = useState(16);
    useEffect(() => {
        window.addEventListener('resize', changeSize);
        changeSize();
    }, []);
    const changeSize = () => {
        const screenWidth = window.innerWidth;
        if (screenWidth < 1280) {
            setFontSize(10);
        }
        else {
            setFontSize(16);
        }
    };
    useEffect(() => {
        const piePlot = new Pie('attendanceDom', {
            appendPadding: 20,
            data: [],
            autoFit: true,
            angleField: 'value',
            colorField: 'type',
            color: ['#44D7B6', '#F7B500', '#DD2A2A', '#0EC5DF'],
            radius: 1,
            innerRadius: 0.6,
            height: cHeight * 0.7,
            tooltip: false,
            // label: {
            //   type: 'inner',
            //   labelHeight: 28,
            //   content: '{value}, {percentage}',
            //   style: {
            //     fill: '#FFFFFF',
            //     fontSize: fontSize
            //   },
            //   formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`
            // },
            label: {
                type: 'inner',
                offset: '-50%',
                autoRotate: false,
                style: { textAlign: 'center' },
                formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`
            },
            interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
            statistic: {
                title: false,
                content: {
                    style: {
                        whiteSpace: 'pre-wrap',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        color: '#fff'
                    }
                }
            },
            legend: {
                layout: 'horizontal',
                position: 'top-right',
                itemName: {
                    style: {
                        fontSize: fontSize,
                        fill: '#FFFFFF'
                    }
                }
            }
        });
        piePlot.render();
        setChart(piePlot);
    }, [fontSize]);
    useEffect(() => {
        if (chart && data) {
            const pieData = [
                { type: '大烫', value: data.ironNum ?? 0 },
                { type: '复查', value: data.reviewNum ?? 0 },
                { type: '包装', value: data.packNum ?? 0 },
                { type: '上架', value: data.putawayNum ?? 0 }
            ];
            chart.update({
                data: pieData,
                statistic: {
                    title: false,
                    content: {
                        style: {
                            fontSize: '1rem'
                        },
                        content: `${(data && data.totalNum) ?? 0}\n总人数`
                    }
                }
            });
        }
    }, [chart, data]);
    useLayoutEffect(() => {
        if (containerRef.current) {
            const containerHeight = containerRef.current.clientHeight;
            setCHeight(containerHeight);
        }
    }, []);
    useEffect(() => {
        window.addEventListener('resize', resize);
        resize(); // 初始化
        return () => {
            window.removeEventListener('resize', resize);
        };
    }, [chart]);
    const resize = () => {
        if (!chart)
            return;
        chart.update({
            label: {
                style: {
                    fontSize: getRemFontSize() * 1.4
                }
            },
            legend: {
                itemName: {
                    style: {
                        fontSize: getRemFontSize() * 1
                    }
                },
                marker: {
                    style: {
                        fontSize: getRemFontSize() * 1,
                        r: getRemFontSize() * 0.4
                    }
                }
            },
            statistic: {
                title: false,
                content: {
                    style: {
                        fontSize: '1rem'
                    },
                    content: `${(data && data.totalNum) ?? 0}\n总人数`
                }
            }
        });
    };
    return (_jsxs("div", { className: styles.container, ref: containerRef, children: [_jsx("header", { className: styles.inventoryHeader, children: "\u51FA\u52E4\u4EBA\u6570" }), _jsx("div", { id: "attendanceDom", style: { marginTop: '6%', height: '78%', width: '100%' } })] }));
};
